<template>
<div class="gudie_card">
    <div class="dot">{{ $t('guide.diagram') }}</div>
    <div class="center">
        <div class="tit">
            <div class="pic_box">
                <img src="../assets/imgs/Group.svg" alt="">
            </div>
            hub.eweadn.cn</div>
        <div class="select_card">
            <div class="select_tit">{{ $t('guide.connectionPrompt') }}</div>
            <div class="select_content">
                <div class="item">
                    {{ $t('guide.deviceName') }}
                    <img class="tips1_icon" src="../assets/imgs/Vector.svg" alt="">
                    <div class="tips tips1_pos">{{ $t('guide.step1') }}</div>
                </div>
                <div class="tips tips2_pos">{{ $t('guide.step2') }}</div>
            </div>
            <div class="btn_wrap">
                <div class="btn">{{ $t('guide.cancel') }}</div>
                <div class="btn btn_ok">{{ $t('guide.connect') }}</div>
            </div>
        </div>
        <div class="tips3">{{ $t('guide.tips') }}</div>
    </div>
</div>
</template>

<script setup>
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
</script>

<style scoped>
.gudie_card{
    color: #b5b5b6;
    background-color: #202224;
    width: 848px;
    height: 415px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    margin-bottom: 50px;
}
.dot{
    position: absolute;
    left: -55px;
    top: -55px;
    background-color: #3d3e3f;
    width: 100px;
    height: 100px;
    transform: rotate(-45deg);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 5px;
}
.tit{
    display: flex;
    align-items: center;
    background-color: #3d3e3f;
    margin-bottom: 5px;
    width: 180px;
    height: 24px;
    border-radius: 12px;
    padding: 4px;
    box-sizing: border-box;
}
.pic_box{
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #5e5f60;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
}
.select_card{
    border: 1px solid #abadad;
    border-radius: 8px;
    padding: 10px;
}
.select_content{
    border: 1px solid #abadad;
    border-radius: 8px;
    width: 341px;
    height: 163px;
    margin-top: 10px;
    overflow: hidden;
    position: relative;
}
.item{
    background-color: #3d3e3f;
    height: 32px;
    line-height: 32px;
    padding-left: 18px;
    color: #fff;
    position: relative;
}
.tips{
    background: #B5B5B6;
    height: 18px;
    line-height: 18px;;
    border-radius: 4px;
    color:#000;
    font-size: 12px;
    padding: 0 14px;
}
.tips1_icon{
    width: 18px;
    height: 18px;
    position: absolute;
    left: 70px;
    top: 20px;
}
.tips1_pos{
    position: absolute;
    left: 84px;
    top: 38px;
}
.tips2_pos{
    position: absolute;
    right: 5px;
    bottom: 5px;
}
.btn_wrap{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 10px;
    gap: 10px;
}
.btn{
    padding: 0 16px;
    height: 32px;
    line-height: 32px;
    border-radius: 16px;
    box-sizing: border-box;
    border: 1px solid #abadad;
    display: flex;
    justify-content: center;
    align-items: center;
    color:#fff;
}
.btn_ok{
    border: none;
    background: #3d3e3f;
}
.tips3{
    margin-top: 10px;
    text-align: center;
}
</style>
